<style type="text/css">
    .spec_image{
        display: inline-block;
    }
    .spec_image_item{
        position: relative;
        display: inline-block;
    }
    .del-img{
        position: absolute;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        width: 13px;
        height: 13px;
        line-height: 12px;
        font-size: 10px;
        display: inline-block;
        text-align: center;
        border-radius: 50%;
        right: -6px;
        top: -6px;
    }
    .layui-btn{
        margin-top: 10px;
    }

    .goods-stock{
        width: 80px;
        display: inline;
    }

    .spec-item .layui-form-checkbox{
        margin-top: 0 !important;
    }
    .new-spec{
        display: inline-block;
        width: 100px;
    }

    .extend-goods-cat>.layui-btn{
        margin-top: 3px;
        margin-right: 5px;
    }
    .extend-goods-cat>.layui-btn,.extend-goods-cat>.layui-form-select{
        float: left;
    }
</style>
<div id="spec_form" class="section">
<div id="spec_select" {if condition="$items"}{else/}style="display:none;"{/if}>
    <div id="spec_form_item"  >

        {if isset($spec)}
        {if condition="$customSpec"}
            {volist name="spec" id="vo"}
            <div class="layui-form-item" pane>
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                    {volist name="vo.specValue" id="v"}
                    <div class="spec-item layui-input-inline">
                        <input type="checkbox" name="spec[{$vo.name}][{$v.id}]" value="{$v.value}" lay-skin="primary"  lay-filter="spec_select" class="spec-select" {if condition="isset($v['isSelected']) && $v['isSelected'] eq 'true'"} checked="true"{/if} >
                        <input type="text" value="{$v.value}" name="row[new_spec][{$v.id}][]" class="layui-input new-spec">
                    </div>
                    {/volist}
                </div>
            </div>
            {/volist}
        {else}
            {volist name="spec" id="vo"}
            <div class="layui-form-item" pane>
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                    {volist name="vo.specValue" id="v"}
                    <input type="checkbox" name="spec[{$vo.name}][]" {if condition="isset($v['isSelected']) && $v['isSelected'] eq 'true'"} checked="true"  {/if} value="{$v.value}" lay-skin="primary" title="{$v.value}" lay-filter="spec_select">  {$v.value}&nbsp
                    {/volist}
                </div>
            </div>
            {/volist}
        {/if}
        {/if}

    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-sm generate-spec">{:__('Generate Spec')}</button>
        </div>
    </div>

    <div id="more_spec" >
        {if condition="$items"}
        <table class="layui-table" lay-size="sm">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>默认货品</th>
                <th>图片</th>
                <th>货号</th>
                <th>规格</th>
                <th>库存</th>
                <th><i class="required-color">*</i>销售价</th>
                <th>成本价</th>
                <th>市场价</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="items" id="vo" key="key"}
            <tr>
                <td>
                    <input type="hidden" name="product[{$vo.spec_name}][id]" value="{$vo.product_id ?? ''}">
                    <input type="checkbox" name="product[{$vo.spec_name}][is_defalut]" title="是否默认" value="1" {if condition="isset($vo.is_defalut) && $vo.is_defalut eq 1"} checked="true"  {/if} class="isdefalut" lay-filter="isdefalut">
                </td>
                <td>
                    <button type="button" class="upSpecImage" data-mimetype="image/*"><i class="fa fa-list"></i> 选择图片</button>
                    <div class="spec_image" {if condition="!isset($vo.image) || !$vo.image" } style="display: none;" {/if}>
                        <div class="spec_image_item">
                            <div class="del-img">
                                x
                            </div>
                            <img src="{$vo.image ?? ''}" id="image-{$key}" style="width:60px;height:60px">
                        </div>
                        <input type="hidden" name="product[{$vo.spec_name}][image]"  value="{$vo.image ?? ''}"  >
                    </div>
                </td>
                <td>
                    <input type="text" name="product[{$vo.spec_name}][sn]" value="{$vo.sn ?? ''}"  placeholder="货号" autocomplete="off" class="layui-input">
                </td>
                <td>
                    {$vo.spec_name}
                </td>
                <td class="have-add-td">
                    <input type="number" name="product[{$vo.spec_name}][stock]" value="0"  placeholder="库存" autocomplete="off" class="layui-input goods-stock">
                    {:__('Total Stock')}：{$vo.stock|default=0}，{:__('Freeze Stock')}：{$vo.freeze_stock|default=0}
                </td>
                <td>
                    <input type="number" step="0.1" min="0" name="product[{$vo.spec_name}][price]" value="{$vo.price ?? ''}"  placeholder="销售价" autocomplete="off" class="layui-input">
                </td>
                <td>
                    <input type="number" step="0.1" min="0" name="product[{$vo.spec_name}][costprice]" value="{$vo.costprice ?? ''}"  placeholder="成本价" autocomplete="off" class="layui-input">
                </td>
                <td>
                    <input type="number" step="0.1" min="0" name="product[{$vo.spec_name}][mktprice]" value="{$vo.mktprice ?? ''}"  placeholder="市场价" autocomplete="off" class="layui-input">
                </td>
                <td>
                    <a class="layui-btn layui-btn-danger layui-btn-xs del-class" >删除</a>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>
        {else/}
        {/if}
    </div>
</div>
{if condition="$items"}
<div id="no_spec" style="display:none;">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span class="required">* </span>{:__('Price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" data-rule="required" class="form-control" step="0.01" name="row[price]" min="0" value="0.00" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Costprice')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-costprice" class="form-control" step="0.01" name="row[costprice]" min="0" value="0.00" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Mktprice')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mktprice" class="form-control" step="0.01" name="row[mktprice]" min="0" value="0.00" type="number">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sn')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sn" class="form-control" name="row[sn]" placeholder="{:__('Please enter the SN')}" maxlength="30" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Stock')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-stock" class="form-control" name="row[stock]" type="number" value="0">
        </div>
        {:__('Positive add stock,Negative decrease stock')}
    </div>

</div>
{else /}
<div id="no_spec">
    <input type="hidden" name="product[id]" value="{$product.id}">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span class="required">* </span>{:__('Price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" data-rule="required" class="form-control" step="0.01" name="row[price]" min="0" value="{$product.price}" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Costprice')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-costprice" class="form-control" step="0.01" name="row[costprice]" min="0" value="{$product.costprice}" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Mktprice')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mktprice" class="form-control" step="0.01" name="row[mktprice]" min="0" value="{$product.mktprice}" type="number">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sn')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sn" class="form-control" name="row[sn]" placeholder="{:__('Please enter the SN')}" maxlength="30" value="{$product.sn}" type="text">
        </div>
        {:__('Auto generate without fillin')}
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Stock')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-stock" class="form-control" name="row[stock]" type="number" value="0">
        </div>
        {:__('Positive add stock,Negative decrease stock')}
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            {:__('Total Stock')}：{$product.stock}，{:__('Freeze Stock')}：{$product.freeze_stock}
        </div>
    </div>
</div>
{/if}
</div>


{if condition="$canOpenSpec eq 'true' "}
<div class="layui-form-item">
    <label class="layui-form-label" >{:__('Open Spec')}：</label>
    <div class="layui-input-inline">
        {if condition="$items"}
        <button type="button" class="layui-btn layui-btn-sm" id="open_spec" is_open="true" lay-filter="open_spec" data-id="{$typeInfo.id}" style="margin-top:5px;">{:__('Close')}</button>
        {else/}
        <button type="button" class="layui-btn layui-btn-sm" id="open_spec" is_open="false" lay-filter="open_spec" data-id="{$typeInfo.id}" style="margin-top:5px;">{:__('Open')}</button>
        {/if}
    </div>
    <div class="layui-form-mid layui-word-aux">
        {:__('The specification value cannot contain "," and ":"')}
    </div>
</div>
{/if}



{notempty name="typeParams"}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>{:__('Goods Params')}</legend></fieldset>
{volist name="typeParams" id="vo"}
<div class="form-group">

    <label class="control-label col-xs-12 col-sm-2">{$vo.name}:</label>
    <div class="col-xs-12 col-sm-8">
        {if condition="$vo.type eq 'text'"}
            <input type="text" name="row[params][{$vo.name}]" value="{$goodsParams[$vo.name] ?? ''}" class="layui-input">
        {elseif condition="$vo.type eq 'checkbox'"/}
            {volist name="$vo.value" id="params"}
                <label>
                {if condition="isset($goodsParams[$vo['name']]) && $goodsParams[$vo['name']]"}
                    <input type="checkbox" name="row[params][{$vo.name}][{$params}]" lay-skin="primary" title="{$params}" {if condition=" is_array($goodsParams[$vo['name']]) && in_array($params, $goodsParams[$vo['name']])"}checked{/if}> {$params}&nbsp
                {else}
                    <input type="checkbox" name="row[params][{$vo.name}][{$params}]" lay-skin="primary" title="{$params}"> {$params}&nbsp
                {/if}
                </label>
            {/volist}
        {elseif condition="$vo.type eq 'radio'"/}
            {volist name="$vo.value" id="params" key="p"}
                <label>
                {if condition="isset($goodsParams[$vo['name']]) && $goodsParams[$vo['name']]"}
                    <input type="radio" name="row[params][{$vo.name}]" value="{$params}" title="{$params}" {if condition="$params eq $goodsParams[$vo['name']]"}checked{/if}> {$params}&nbsp
                {else}
                    <input type="radio" name="row[params][{$vo.name}]" value="{$params}" title="{$params}" {if condition="$p eq 1"}checked{/if}> {$params}&nbsp
                {/if}
                </label>
            {/volist}
        {/if}
    </div>
</div>
{/volist}
{/notempty}